<template>
    <!-- 车辆查询 -->
    <view class="search-car-all">
        <!-- 背景图 -->
		 <view class="bg-icon">
		    <image :src="carBg" mode="" class="bac" />
		    <view class="bg-text">
		        <view class="bg-text-top">输 入 创 客 号</view>
		    </view>
		</view>
        <!-- 输入的车牌 -->
        <view class="search-car-input" @click="carInputClick">
            <view class="car-input">
                <view class="car-input-text">
                    {{plateNum}}
                </view>
                <view class="cursor" v-if="isCursor">
                    <image :src="cursor" mode="" />
                </view>
            </view>
            <view class="search-car" @click.stop="addSerach">确定</view>
        </view>
		<view class="jump_back" @tap="jump_back">跳过</view>
		<!-- 引用车牌组件 -->
        <plate-number ref="plate" v-model="plateNum" @showOrHide="showOrHide"></plate-number>
    </view>
</template>

<script>
	import cursor from 'static/images/jewel/cursor.gif'
	import carBg from 'static/images/jewel/carBg.png'
	import plateNumber from '@/components/plate-number/plateNumber.vue'
    export default {
		components:{plateNumber},
        data() {
            return {
				carBg:'',
                plateNum: '', //输入的车牌号
                cursor: '', //输入焦点gif地址
                isCursor: true, //是否显示焦点
				options: {},	// 地址参数
            };
        },
        onHide() {
            //恢复初始化
            // this.plateNum = '';
        },
        onShow() {
            //初始化
            // this.$refs.plate.init();
            this.cursor = cursor;
            this.carBg = carBg;
            this.carInputClick();
        },
		onLoad(options) {
			this.options = options;
		},
        methods: {
            /**
             * @desc 车牌选择关闭和打开
             */
            showOrHide(falg) {
                this.isCursor = falg;
            },
            /**
             * @desc 显示车牌选择器
             */
            carInputClick() {
                this.$refs.plate.show();
            },
			/**
			 * 回到订单页
			 * 如果存在号码，删除
			 */
			jump_back(){
				let options = this.options;
				delete options.chuangke_num;
				this.options_change_string(options);
			},
			options_change_string(options){
				let param = '';
				for (let i in options) {
					param+= i + '=' + options[i] + '&';
				}
				uni.redirectTo({
					url: "/pages/jewel/order/orderinfo?" + param + "&delta=2"
				})
			},
            /**
             * @desc 添加车牌方法
             */
            addSerach() {
                //输入了正确的车牌才执行请求
                if (this.plateNum.length === 7) {
                    this.$refs.plate.close();
                    //增加车牌方法
					uni.showToast({
						title: '创客号:'+this.plateNum,
						duration: 2000
					});
					let options = this.options;
					options.chuangke_num = this.plateNum;
					uni.setStorageSync('chuangke_num', this.plateNum);
					uni.navigateBack({});
				//	this.options_change_string(options);
                } else {
					uni.showToast({
						title: '请输入正确的创客号',
						icon: 'none',
						duration: 2000
					});
                }
            }
        }
    }
</script>

<style lang="scss">
	@function vww($number) {
	    @return ($number / 375)*750+rpx;
	}
	@mixin bgCenterCustom($bg_Cover:contain) {
	    background-repeat: no-repeat;
	    background-size: $bg_Cover;
	    background-position: center;
	}
	.search-car-all {
	    width: 100vw;
	    height: 100vh;
	    background: #FFFFFF;
	
	    //背景图
	
	    .search-car-input {
	        position: relative;
	        z-index: 9999;
	        width: vww(341);
	        height: vww(50);
	        background: #FFFFFF;
	        margin: 0 auto;
	        margin-top: vww(-25);
	        box-shadow: 0px 4px 9px 2px rgba(103, 201, 254, 0.21);
	        border-radius: 4px;
	
	        .car-input {
	            float: left;
	            height: vww(20);
	            display: flex;
	            margin-top: vww(15);
	            padding-left: vww(12);
	
	            //输入的车牌
	            .car-input-text {
	                float: left;
	                font-size: vww(16);
	                color: #4A4A4A;
	                height: vww(20);
	                line-height: vww(20);
	                letter-spacing: 6px !important;
	            }
	
	            //新能源标识图
	            .energy {
	                float: left;
	                width: vww(28);
	                height: vww(15);
	                vertical-align: middle;
	                align-self: center;
	                margin-right: vww(10);
	
	                image {
	                    width: vww(28);
	                    height: vww(15);
	                    display: block;
	                }
	            }
	
	            // 输入焦点图片
	            .cursor {
	                float: left;
	                width: 1px;
	                height: vww(15);
	                vertical-align: middle;
	                align-self: center;
	
	                image {
	                    width: 1px;
	                    display: block;
	                    height: vww(15);
	                }
	            }
	        }
	
	        //添加并查询
	        .search-car {
	            float: right;
	            width: vww(98);
	            height: vww(22);
	            margin-top: vww(14);
	            border-left: 2px solid #9B9B9B;
	            text-align: center;
	            color: #00A7EA;
	            font-size: vww(14);
	            line-height: vww(22);
	        }
	    }
	}
	.bg-icon {
	    width: 100vw;
	    position: relative;
	    display: flex;
		height: vww(174);
	    .bac {
	        width: 100%;
	        position: absolute;
	        left: 0;
	        top: 0;
	        height: 100%;
	        z-index: 1;
	        display: block;
	        @include bgCenterCustom($bg_Cover: cover);
	    }
	
	    .icon {
	        position: absolute;
	        display: block;
	        left: vww((375 - 75)/2);
	        z-index: 99;
	        width: vww(75);
	        height: vww(110);
	        top: vww((186 - 110)/2);
	        @include bgCenterCustom();
	    } 
	
	    //文字
	    .bg-text {
	        position: absolute;
	        left: 0;
	        top: 0;
	        z-index: 99;
	
	        .bg-text-top {
	            width: 100vw;
	            font-size: vww(26);
	            color: #FFFFFF;
	            height: vww(37);
	            line-height: vww(37);
	            text-align: center;
	            margin-top: vww(52);
	        }
	
	        .bg-text-bottom {
	            width: 100vw;
	            font-size: vww(12);
	            color: #FFFFFF;
	            height: vww(18);
	            line-height: vww(18);
	            text-align: center;
	        }
	    }
	}
	.jump_back{
		color: #00A7EA;
		height: 80rpx;
		width: 80%;
		margin: 0 auto;
		-webkit-box-shadow: 0px 4px 9px 2px rgba(103, 201, 254, 0.21);
		box-shadow: 0px 4px 9px 2px rgba(103, 201, 254, 0.21);
		border-radius: 8rpx;
		font-size: 28rpx;
		line-height: 80rpx;
		text-align: center;
		margin-top: 160rpx
	}
</style>
